<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/27
  Time: 17:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--查询按钮--%>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="平调后的分店信息">
            <el-select clearable v-model="formInline.branchid" placeholder="活动区域">
                <el-option v-for="item in branchList" :label="item.branchname" :value="item.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>&nbsp;&nbsp;查询</el-button>
        </el-form-item>
    </el-form>
    <%--用表格显示--%>
    <template>
        <el-table
                :data="tableData"
                border
                height="400"
                style="width: 100%">
            <el-table-column
                    prop="cid"
                    label="出库编码">
            </el-table-column>
            <el-table-column
                    prop="outstaff.staffname"
                    label="出库人">
            </el-table-column>
            <el-table-column
                    prop="outtime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    width="180"
                    label="出库时间">
            </el-table-column>
            <el-table-column
                    prop="examstaff.staffname"
                    label="审核人">
            </el-table-column>
            <el-table-column
                    prop="examtime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    width="180"
                    label="审核时间">
            </el-table-column>
            <el-table-column
                    prop="outmethod"
                    label="出库方式">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.outmethod===3" type="info">平调出库</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="examstate"
                    width="100"
                    label="审核状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.examstate===1" type="warning">待审核</el-tag>
                    </span>
                    <el-tag v-else-if="scope.row.examstate===2" type="success">通过审核</el-tag>
                    </span>
                    <el-tag v-else-if="scope.row.examstate===3" type="danger">审核驳回</el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    label="原始分店">
            </el-table-column>
            <el-table-column
                    prop="newbranch.branchname"
                    label="平调分店">
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="驳回理由">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="180"
                    label="详情">
                <template slot-scope="scope">
                    <el-button size="medium" type="primary" @click="audit(scope.row.cid)" round><i class="el-icon-info"></i>&nbsp;&nbsp;详细信息
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--分页功能--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <%--详情信息的表格--%>
    <el-dialog
            title="出库详情"
            :visible.sync="dialogVisible"
            width="70%"
            height="400"
            :before-close="handleClose">
        <template>
            <el-table
                    :data="tableAudit"
                    border
                    height="300px">
                style="width: 100%">
                <el-table-column
                        prop="xid"
                        label="出库详情ID">
                </el-table-column>
                <el-table-column
                        prop="goods.goodsname"
                        label="商品名">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="出库数量">
                </el-table-column>
                <el-table-column
                        prop="goods.sprice"
                        label="售价">
                </el-table-column>
                <el-table-column
                        prop="total"
                        label="总价">
                </el-table-column>
            </el-table>
        </template>
        <%--分页--%>
        <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPage2"
                :page-sizes="[3,5,7,10]"
                :page-size="pageSize2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
        </el-pagination>
    </el-dialog>
</div>
</body>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            tableData: undefined,//表格数据
            total: 0,//数据总数
            currentPage: 1,//当前页码
            pageSize: 5,//每页显示条数
            formInline: {},//查询条件
            branchList: undefined,//分店列表

            dialogVisible: false,
            currentPage2: 1,
            pageSize2: 3,
            tableAudit: undefined,
            total2: 0,
            cid: undefined,//出库编号分页参数
        },
        created() {
            this.getTransferInformation()
            this.getBranchList()
        },
        methods: {
            //查询所有审核表信息
            getTransferInformation() {
                axios.post("/transferEx/getTransferInformation?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.formInline).then(resp => {
                    this.tableData = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            // 改变每页显示的条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.getTransferInformation()
            },
            // 改变页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getTransferInformation()
            },
            //点击查询
            onSubmit() {
                this.getTransferInformation()
            },
            //查询所有的店铺名字
            getBranchList() {
                axios.get("/branch/getBranchName").then(res => {
                    if (res.data.code === 200) {
                        this.branchList = res.data.data;
                    }
                })
            },
            //对话框的关闭
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //点击详细信息按钮
            audit(cid) {
                this.dialogVisible = true;
                this.cid = cid;
                axios.get("/transferEx/getOutTransferGoodsByCid?cid=" + this.cid+ "&currentPage=" + this.currentPage2 + "&pageSize=" + this.pageSize2).then(resp => {
                    if (resp.data.code === 200) {
                        this.tableAudit = resp.data.data.list;
                        this.total2 = resp.data.data.total;
                    }
                })
            },
            // 改变每页显示的条数
            handleSizeChange2(val) {
                this.pageSize2 = val;
                this.audit(this.cid)
            },
            // 改变页码
            handleCurrentChange2(val) {
                this.currentPage2 = val;
                this.audit(this.cid)
            },
        }
    })
</script>
</html>
